<template>
	<view class="container">
		<u-navbar title='一分耕耘' :title-bold='true' :border-bottom='false'></u-navbar>

		<view class="a">
			<view>
				<p>￥<span>{{money}}</span></p>
				<text>账户余额(元)</text>
			</view>
			<navigator :url="'take?money='+money" class="event">
				提现
			</navigator>
		</view>

		<view class="b">
			<view @click="type=1" :class="type==1?'t_index':''">收入记录</view>
			<view @click="type=2" :class="type==2?'t_index':''">支出记录</view>
		</view>

		<view v-if="list.length">
			<view class="card" v-if="type==1">
				<navigator class="i" :style="{'border-bottom':index==list.length-1?'unset':''}"
					v-for="(item,index) in list" :key="index" :url="'detail?type=1&id='+item.id">
					<view class="left">
						<u-avatar :size='72' :src="item.user_avatar"></u-avatar>
						<view>
							<p>{{item.memo}}</p>
							<text>{{item.createtime}}</text>
						</view>
					</view>
					<view class="right">
						<span>{{item.money}}</span>
					</view>
				</navigator>
			</view>
			<view class="card" v-else>
				<navigator class="i" :url="'detail?type=2&id='+item.id"
					:style="{'border-bottom':index==list.length-1?'unset':''}" v-for="(item,index) in list"
					:key="index">
					<view class="left">
						<view class="_img">
							<image style="width: 18px;" src="../../static/icon/tixian.png" mode="widthFix"></image>
						</view>
						<view>
							<p>{{item.memo}}</p>
							<text>{{item.createtime}}</text>
						</view>
					</view>
					<view class="right">
						{{item.money}}
					</view>
				</navigator>
			</view>
		</view>
		<view class="hs u-font-12">
			<view style="width: 60vw;margin: 0 auto;">

				<p>富在术数，不在力耕；</p>
				<p>利在局势，不在劳身；</p>
				<p>早有股，早成功；</p>
				<p>晚有股，晚成功；</p>
				<p>没有股，拿工钱。</p>
				<p class="u-m-t-20">香港，80岁开计程车拿工钱，</p>
				<p class="u-m-b-20">日本，90岁打螺丝赚工钱。</p>
				<p>拿到股权：从此农奴翻身把歌唱！</p>
			</view>
		</view>
		<view class="u-flex under u-font-10">
			<view>
				<p>与时俱进，10元/次的耕地费用，</p>
				<p>已不能维持如今体面的生活。</p>
				<p>您的每一份耕耘，</p>
				<p>都是您往后航程中新增的羽翼。</p>
			</view>

			<view class="popup-show" @click="show=true">
				股权合作方式
			</view>
		</view>
		<u-popup border-radius='30' :closeable='true' v-model="show" mode="bottom">
			<view class="popup-content">
				<view class="title">
					股权合作方式
				</view>
				<view class="u-p-30 ">

					<p>1.年帮助邻居6000人以上；</p>
					<p>2.年付出，被人均认可，被认可总值¥20000；</p>
					<p>3.年拓展普通朋友2000人；</p>
					<p>4.年拓展有证专业人士10人；（人均年帮助2000人。）</p>
					<p>5.前86名达标。</p>
					-
					<p>即可选择成为平台的合伙股东；</p>
					<p>即可选择和平台组建合资公司；</p>
					<p>经过沉淀，您自己也有了成立公司的实力。</p>
					-
					<p> 86名以外的，可以和股东双向选择再合作，或者下一次机会再和平台合作。</p>
					-
					<view class="u-font-28">

						<p>*股份：</p>
						<p>只是奋斗者，为自己背后一家老小，</p>
						<p>挣得的、应得的生活保障。</p>
						不能让10元耕耘工钱，寒了护航员的身、心。
						<p>要让爱心护航员的家属，有股份保障，生活体面。</p>
						保护护航员，就是爱惜我们自己。
					</view>
				</view>

				<view class="btn" @click="show=false">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		money
	} from '@/api/index.js'
	export default {
		data() {
			return {
				type: 1,
				money: 0,
				list: [],
				show: false
			}
		},
		onShow() {
			this.init()
		},
		watch: {
			type() {
				this.init()
			}
		},
		methods: {
			init() {
				this.list = []
				money({
					type: this.type
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.list
						this.money = res.data.money
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})

			}
		}
	}
</script>

<style lang="less">
	.container {
		height: auto;
		font-size: 16px;
		color: #666666;
		padding-bottom: 30rpx;

		.popup-content {
			padding: 30rpx;
			color: #3D3D3D;

			.title {
				font-size: 20px;
				text-align: center;
				color: #000000;
			}

			.btn {
				border-radius: 30px;
			}
		}

		.hs {
			color: #999;
			margin-top: 20px;
		}

		.under {
			width: 100vw;
			padding: 25rpx 35rpx;
			color: #98A8AC;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			flex-flow: column;

			.popup-show {
				text-align: center;
				width: 40vw;
				padding: 10rpx;
				margin: 10rpx auto;
				color: #53C8D3;
				border-radius: 236px;
				box-sizing: border-box;
				border: 0.5px solid #6EC9E1;
			}
		}

		.card {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 4px;
			width: 90vw;
			margin: 10px auto;

			.i {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 0.5px solid #EDEDED;
				padding: 20rpx 0;
			}

			.right {
				font-size: 16px;
				color: #333333;
			}

			.left {
				display: flex;
				align-items: center;
			}

			u-avatar {
				margin-right: 20rpx;
			}

			p {
				font-size: 14px;
			}

			text {
				color: #B6B6B6;
				font-size: 12px;
			}

			span {
				color: #FDA43B;
			}

			._img {
				width: 72rpx;
				height: 72rpx;
				background-color: #53C8D3;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}

		.b {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 10px;
			width: 60vw;
			margin: 0 auto;

			view {
				padding: 20rpx 10rpx;
			}

			.t_index {
				border-bottom: 2px solid #6EC9E1;
				color: #6EC9E1;
			}
		}

		.a {
			background: #6EC9E1;
			padding: 30rpx;
			color: #fff;
			box-shadow: 0px 3px 9px 0px rgba(203, 122, 0, 0.0314);
			display: flex;
			justify-content: space-between;
			align-items: center;

			p {
				font-size: 24px;

				span {
					font-size: 36px;
				}
			}

			text {
				font-size: 14px;
				padding-left: 4px;
				opacity: 0.6;
			}
		}

		.event {
			width: 75.59px;
			height: 36px;
			border-radius: 199px;
			opacity: 1;
			background: #FFFFFF;
			color: #53C8D3;
			line-height: 35px;
			text-align: center;
		}

		.nodata {
			text-align: center;
			padding-top: 20vh;

		}
	}
</style>